<script>
import GlobalFilterListener from './GlobalFilterListener.vue'
import navigate2enterpriseAnalysis from '@/mixins/navigate2enterpriseAnalysis'
export default {
  name: 'energy-using-enterprise',
  mixins: [GlobalFilterListener, navigate2enterpriseAnalysis],
  data () {
    return {
      type: '1',
      typeValue: '-1',
      show: true,
    }
  },
  computed: {
    enterpriseList () {
      return this.$store.state.energyEnterpriseList
    },
    lists () {
      const enterpriseList = this.enterpriseList
      const type = this.type
      const typeValue = this.typeValue
      return enterpriseList.filter(v => {
        return typeValue === '-1' ||
          (type === '1' && v.districtBelong === typeValue) ||
          (type === '2' && v.belongIndustry === typeValue)
      })
    },
  },
  watch: {
    lists () {
      // TODO
      this.show = false
      this.$nextTick(() => {
        this.show = true
        this.$nextTick(() => {
          this.start()
        })
      })
    },
  },
  mounted () {
    this.$store.dispatch('GET_ENTERPRISE_LIST')
    this.start()
  },
  methods: {
    eventBusHandler ({ type, typeValue }) {
      this.type = type
      this.typeValue = typeValue
      this.$nextTick(() => {
        this.start()
      })
    },
    start () {
      const wrap = this.$refs.lists
      if (!wrap) return
      const parent = wrap.parentNode
      const clientHeight = parent.offsetHeight
      const scrollHeight = wrap.scrollHeight
      wrap.style.transform = 'translateY(0)'
      if (scrollHeight > clientHeight) {
        this.$nextTick(() => {
          this.animate(scrollHeight, 15, (d) => {
            wrap.style.transform = `translateY(${-d}px)`
          })
        })
      }
    },
    animate (scrollHeight, speed = 10, move) {
      let arrive = false

      const s = scrollHeight
      // px/s
      const v = speed / 1000
      const t = s / v

      let startTime = performance.now()
      let passTime = 0

      const step = (timeStamp) => {
        passTime = timeStamp - startTime
        let d = v * passTime
        if (passTime >= t) {
          startTime = timeStamp
          arrive = true
          move && move(0, arrive)
        } else {
          if (d > s) d = s
          move && move(d, arrive)
        }
        this.timer = requestAnimationFrame(step)
      }

      this.timer = requestAnimationFrame(step)
    },
  },
}
</script>

<template>
  <div class="block-item">
    <div class="flex align-center item-head" v-show="false">
      <i class="item-icon i-custom:print"></i>
      <div class="head-title">
        <h3 class="primary-title">用能企业</h3>
        <p class="secondary-title">Energy-using enterprise</p>
      </div>
    </div>
    <div class="padding item-body">
      <div class="item-content no-padding overflow-hidden" style="width:100%;height: 240px;">
        <ul v-if="show" ref="lists" class="enterprise-lists">
          <li class="enterprise-item" v-for="item in lists" :key="item.id" @click="navigateToEnterpriseAnalysis({ id: item.id }, 'enterpriseCode')">{{item.name}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped>
.item-content {
  box-shadow:  0 0 2px #02ffff, 0 0 2px rgb(1, 130, 172), inset 0 0 16px rgb(1, 130, 172);
}
.enterprise-lists {
  list-style: none;
}
.enterprise-item {
  color: #02ffff;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-15px, -50%);
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #01b6ed;
    box-shadow: 0 0 16px 3px #01b6ed;
  }
}
</style>
